<template>
  <view class="content">
    <u-navbar title="商家中心" height="50" title-size="36"> </u-navbar>
    <view class="top-bar">
      <view class="mer-box">
        <u-icon :name="merSummery.logo" size="166" mode="circle"></u-icon>
        <view class="mer-info">
          <view class="mer-name">{{ merSummery.name }}</view>
          <!-- <view class="mer-tip">
						30个商品&nbsp;&nbsp;37个粉丝
					</view>
					<view class="">
						店铺评分 5.0 <u-icon style="margin-left: 8rpx;" :name="getImageUrl('more.png')" size="13"></u-icon>
					</view> -->
        </view>
        <img :src="getImageUrl('more.png')" style="width: 10rpx; height: 15rpx" />
      </view>
    </view>
    <view class="contentView">
      <view class="orderView">
        <view class="tabItemView">
          <view class="tabItem" @click="onMerOrder(0)">
            <view class="tabNumber">{{ orderCount.waitHandleCount }}</view>
            <view class="tabTitle2">待处理订单</view>
          </view>
          <view class="tabItem" @click="onMerOrder(1)">
            <view class="tabNumber">{{ orderCount.waitDeliveryCount }}</view>
            <view class="tabTitle2">代发货订单</view>
          </view>
          <view class="tabItem" @click="onMerRefund()">
            <view class="tabNumber">{{ orderCount.waitRefundCount }}</view>
            <view class="tabTitle2">待退款订单</view>
          </view>
        </view>
      </view>
      <!-- -->
      <view class="income" @click="routeTo(`/other_center/mer-income/mer-income`)">
        <view class="">
          <view class="income-top">
            <view class="income-title"> 店铺经营收入 </view>
            <text>营收统计</text>
            <u-icon :name="getImageUrl('more.png')" size="15"></u-icon>
          </view>

          <view class="income-content">
            <view class="content-item">
              <view class="item-title"> 今日营业额 </view>
              <p>{{ (merSummery.todayTradeOrder.totalPrice * 0.01).toFixed(2) }}元</p>
            </view>
            <view class="content-item">
              <view class="item-title"> 今日订单数量 </view>
              <p>{{ merSummery.todayTradeOrder.totalCount }}单</p>
            </view>
          </view>
        </view>

        <!-- @click="routeTo(`/other_center/mer-balance/mer-balance`)"  -->
        <view class="income-top floor">
          <view class="income-title">
            账号余额（元）：{{ (merSummery.wallet.balance * 0.01).toFixed(2) }}
          </view>
          <u-icon :name="getImageUrl('more.png')" size="15"></u-icon>
        </view>
      </view>
      <view class="menuView">
        <u-grid :col="4" :border="false" @click="onPathPage">
          <u-grid-item
            :custom-style="{ padding: '20rpx 0px' }"
            v-for="(item, index) in menuList"
            :key="index"
            :index="index"
          >
            <view class="gridView">
              <u-icon :name="item.icon" :size="80"></u-icon>
              <view class="gridText">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>

      <!-- <view @click="show = true" class="" style="color:#999999; text-align: center;margin-top: 120rpx;">
				<view class="">
					更多功能请至PC端管理后台操作
				</view>
			</view> -->
    </view>

    <u-popup mode="bottom" v-model="show" border-radius="15" height="600">
      <view class="">
        <view class="popup-tip"> 注:请复制下面连接到电脑端浏览器中打开登录 </view>
        <view class="popup-title"> 商家后台管理登录链接 </view>
        <view class="popup-content" @click="onCopy">
          <text style="margin-right: 10rpx">http://www.jjd.com/admin</text>
          <u-icon name="/static/store/fz.png" size="30"></u-icon>
        </view>
        <view class="popup-title"> 商家后台管理登录管理账号 </view>
        <view class="popup-content">
          初始账号：169****90 <br />
          初始密码: ******
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { STATIC_URL } from '@/common/config.js'
export default {
  data() {
    return {
      show: false,
      centerStatus: 1,
      navBackground: {
        background: '#00000000'
      },
      shopId: '',
      orderCount: {},
      merSummery: {
        todayTradeOrder: {},
        wallet: {}
      },
      merchantInfo: {},
      userCode: '',
      menuList: [
        {
          icon: STATIC_URL + '/images/ddgl.png',
          name: '订单管理',
          path: '/other_center/mer-order/mer-order'
        },
        {
          icon: STATIC_URL + '/images/sjxx.png',
          name: '商家信息',
          path: '/other_center/mer-setting/mer-setting'
        },
        // {
        // 	icon: STATIC_URL + '/images/yxhd.png',
        // 	name: '营销活动',
        // 	path: '/other_center/mer-action/mer-action',
        // },
        {
          icon: STATIC_URL + '/images/spgl.png',
          name: '视频管理',
          path: '/other_center/mer-video/mer-video'
        },
        {
          icon: STATIC_URL + '/images/spgl.png',
          name: '商品上架',
          path: '/other_center/mer-goods/mer-goods'
        },
        {
          icon: STATIC_URL + '/images/yqyj.png',
          name: '邀请有奖',
          path: '/other/invite-reward/invite-reward?status=2'
        }
        // {
        // 	icon: STATIC_URL + '/images/pjgl.png',
        // 	name: '评价管理',
        // 	path: '/other_center/mer-comment/mer-comment',
        // },
        // {
        // 	icon: STATIC_URL + '/images/lxkf.png',
        // 	name: '联系客服',
        // 	path: '/other/help-center/help-center',
        // },
      ]
    }
  },
  onLoad() {
    // this.$u.get("/app-api/shop/detail/my").then(res=>{
    // 	this.merchantInfo = uni.getStorageSync("userInfo").extras.shopIds[0]
    // })

    this.$u.api.getUserInfo().then((res) => {
      this.userInfo = res.data
      if (res.data.extras.shopIds.length > 0) {
        this.$u
          .get('/app-api/statistics/shop/shop-summary?id=' + res.data.extras.shopIds[0])
          .then((res) => {
            this.merSummery = res.data
          })
      }
    })
    this.shopId = uni.getStorageSync('userInfo').extras.shopIds[0]
  },
  onShow() {
    this.$u.get('/app-api/shop/trade-order/get-count?id=' + this.shopId).then((res) => {
      this.orderCount = res.data
    })

    // this.$u.get("/app-api/statistics/shop/shop-summary?id=" + + this.shopId).then(res=>{

    // })
    this.$u.get('/app-api/shop/detail/get?id=' + this.shopId).then((res) => {
      uni.setStorageSync('shopType', res.data.type)
    })
  },
  onShareAppMessage() {
    return {
      path: '/pages/index/index?pid=' + this.userCode
    }
  },
  methods: {
    onLogin() {
      this.$utils.goToLogin()
    },
    onSetting() {
      this.$utils.route('/universal/setting/setting', false)
    },
    onGoodsOrder(index) {
      if (index == 5) {
        this.$utils.route({
          url: '/other/after-salse-goods/after-salse-goods',
          params: {
            index: index
          }
        })
        return
      }
      this.$utils.route(
        {
          url: '/pages/order-list/order-list',
          params: {
            index: index
          }
        },
        false
      )
    },
    onMerRefund() {
      this.$utils.route('/other_center/mer-order-refund/mer-order-refund', false)
    },
    onMerOrder(e) {
      this.$utils.route('/other_center/mer-order/mer-order?index=' + e, false)
    },

    onPathPage(index) {
      if (index == 6) {
        uni.makePhoneCall({
          phoneNumber: '0858-8685365566',
          fail(res) {
            uni.$u.toast(JSON.stringify(res, null, 2))
          }
        })
      }
      let path = this.menuList[index].path
      this.$utils.route(path, false)
    },
    routeTo(url) {
      this.$utils.route(url, false)
    },
    onMyResale() {
      uni.navigateTo({
        url: '/other/invite-reward/invite-reward'
      })
    },
    onCopy() {
      // 获取要复制的文本内容
      let text = '需要复制的文本'

      // 调用 uni.setClipboardData() 将文本设置到剪贴板上
      uni.setClipboardData({
        data: 'http://www.jjd.com/admin',
        success: (res) => {
          // 成功后的处理逻辑
          this.$u.toast('复制成功')
        },
        fail: () => {
          // 失败时的处理逻辑
          this.$u.toast('复制失败，请手动输入')
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #f5f5f5;
  padding: 20rpx;
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.mer-box {
  padding: 20rpx;
  background-color: #fff;
  display: flex;
}

.mer-info {
  flex: 1;
  margin-left: 15rpx;
  font-size: 30rpx;
  line-height: 55rpx;
}

.mer-name {
  font-size: 32rpx;
}

.mer-tip {
  font-size: 24rpx;
  color: #999999;
}

.orderView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 0;
  z-index: 100;
}

.orderTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 25rpx;
}

.activeTab {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 20rpx;
}

.tabItemView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tabItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 26rpx;
  padding-bottom: 26rpx;
}

.tabTitle {
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 15rpx;
}

.tabTitle2 {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 15rpx;
}

.tabNumber {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.income {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.income-top {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.income-title {
  flex: 1;
  font-size: 30rpx;
}

.income-content {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  font-size: 26rpx;
}

.content-item {
  text-align: center;
  line-height: 55rpx;
}

.item-title {
  font: 26rpx;
  color: #999999;
}

.content-item p {
  font-size: 36rpx;
}

.price-tip {
  font-size: 24rpx;
}

.floor {
  padding: 15rpx 0;
  border-top: #ededed solid 2rpx;
}

.menuView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
}

.menuTitle {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  padding: 20rpx;
}

.gridView {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: none;
}

button {
  line-height: 1;
}

button::after {
  border: none;
}

.gridText {
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 20rpx;
}

.other-center {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font: 30rpx;
  background-color: #fff;
  width: 710rpx;
  margin: 20rpx 20rpx 0 20rpx;
}

.other-center text {
  flex: 1;
  font-size: 30rpx;
  margin-left: 10rpx;
}

.rig-tip {
  color: #0f76bc;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.popup-tip {
  color: #f54831;
  margin-top: 50rpx;
  padding: 20rpx;
}

.popup-title {
  padding: 20rpx;
  font-size: 30rpx;
}

.popup-content {
  padding: 20rpx;
  margin: 0 20rpx;
  background-color: #f5f5f5;
  color: #666666;
  line-height: 50rpx;
}
</style>
